<template>
<div :class="cssLink?'h5':'web'">
    <div class="hello-page">
        <div class="top-box">
            <img class="top-log" src="../../../assets/wzz_image/wzzlog.png" />
            <div class="top-title">生产四部可视化系统数据看板</div>
            <div class="top-time">{{ currentTime }}</div>
        </div>
        <div class="search-content">
            <div class="search-box">
                <div class="search-list">
                    <el-date-picker v-model="dateValue" type="date" placeholder="请选择日期" style="width: 140px;" />
                </div>
                <div class="search-list">
                    <el-select v-model="value" placeholder="请选择工艺" style="width: 140px;">
                        <el-option label="工艺1" value="1" />
                    </el-select>
                </div>
                <div class="search-list">
                    <el-select v-model="value" placeholder="请选择品相" style="width: 140px;">
                        <el-option label="工艺1" value="1" />
                    </el-select>
                </div>
                <div class="search-list">
                    <el-select v-model="value" placeholder="请选择斤/片" style="width: 140px;">
                        <el-option label="工艺1" value="1" />
                    </el-select>
                </div>
                <div class="query-btn">查询</div>
            </div>
            <div class="echart-total-box">
                <div class="echart-total">
                    <div class="echart-text">每日总产量（出库）</div>
                    <div class="echart-num">
                        <div>126,000</div>
                        <span>片</span>
                    </div>
                </div>
                <div class="echart-total" v-for="(item,index) in echartTotal" :key="index">
                    <div class="echart-text">{{ item.name }}</div>
                    <div class="echart-num">
                        <div>{{ item.value }}</div>
                        <span>片</span>
                    </div>
                </div>                
            </div>
        </div>
        <div class="echart-contnt">
            <div class="echart-list">
                <div class="echart-box"  style="height:38.5vh;">
                    <progressBar text="每日计划达成情况" :planData="planData"></progressBar>
                </div>
                <div class="echart-box" style="height: 40vh;display: flex;flex-wrap: wrap;">
                    <div style="width:33%;height:50%;">
                        <echartsPie :echartsPieData="echartsPieData" text="机器选籽" > </echartsPie>
                    </div>
                    <div style="width:33%;height: 50%;">
                        <echartsPie :echartsPieData="echartsPieData" text="喷码贴标机" > </echartsPie>
                    </div>
                    <div style="width:33%;height:50%;">
                        <echartsPie :echartsPieData="echartsPieData" text="卷膜包装机" > </echartsPie>
                    </div>
                    <div style="width:33%;height: 50%;">
                        <echartsPie :echartsPieData="echartsPieData" text="包装支援单口" > </echartsPie>
                    </div>
                    <div style="width:33%;height:50%;">
                        <echartsPie :echartsPieData="echartsPieData" text="单口数粒外包机" > </echartsPie>
                    </div>
                    <div style="width:33%;height: 50%;">
                        <echartsPie :echartsPieData="echartsPieData" text="西胜裸籽包装机" > </echartsPie>
                    </div>
                </div>
            </div>


            <div class="echart-list">
                <div class="echart-box"  style="height: 38.5vh;">
                    <progressLoop2 type="power" company="卷膜包装机（片）" :color1="color3" :color2="color4" :dateData="dateData" :dataList="electricList2"></progressLoop2>
                </div>
                <div style="display: flex;">
                    <div class="echart-box" style="flex: 1;">
                        <div style="height: 40vh;">
                            <foldLine type="power" company="机器产能利用率" :lineChartForm="lineChartForm"></foldLine>
                        </div>
                    </div>
                    <div class="echart-box" style="flex: 1;">
                        <div style="height: 20vh;">
                            <echartsPie :echartsPieData="echartsPieData2"> </echartsPie>
                        </div>
                        <div style="height: 20vh">
                            <progressLoop2 type="power" company="卷膜包装机" :color1="color3" :color2="color4" :dateData="dateData" :dataList="electricList2"></progressLoop2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script setup>
  import progressBar from '../../components/progressBar'
  import echartsPie from '../../components/echartsPie'
  import progressLoop2 from '../../components/progressLoop2'
  import foldLine from '../../components/foldLine'
    // 每日计划
    let planData=ref({
        showName:['包装选籽班','单口一班','包装机一班','包装机二班','喷码班','包装一班','包装二班','包装三班','包装四班'],
        numerical:[56,90,70,60,66,87,78,29,40],
        total:[100,100,100,100,100,100,100,100,100,100,100]
    })
    // 每日计划产量达成实时情况
    let dateValue=ref('')
    // 设备实时运行状态
    let echartsPieData=ref([
        {name:'运行机台',value:100,title:'运行机台'},
        {name:'未运行机台',value:200,title:'未运行机台'}
    ])
    // 机器运行效率（罐）
    let color3=reactive([
        {offset: 0,color: "rgba(45, 182, 251, 1)"},
        {offset: 1,color: "rgba(12, 61, 114, .8)"}
    ])
    let color4=reactive([
        {offset: 0,color: "rgba(244, 82, 75, 1)"},
        {offset: 1,color: "rgba(18, 15, 37, 1)"}
    ])
    let dateData=reactive(['包装机1号','包装机2号','包装机3号','包装机4号','包装机5号','包装机6号','包装机7号','包装机8号','包装机9号','包装机10号'])
    let electricList2=reactive([1430,120,110,1430,110,1430,1110,900,980,1200])
    // 状态
    let echartTotal=ref([
        {name:"机器选籽",value:100},
        {name:"人工选籽",value:2222},
        {name:"卷膜包装机",value:1111},
        {name:"包装支援单口",value:122},
        {name:"单口数粒外包",value:31},
        {name:"裸籽包装机",value:2444},
        {name:"包装流水线",value:5551},
    ])
    // 机器产能利用率
    let lineChartForm=ref({
        nameData:['机器选籽','人工选籽','卷膜包装机','包装支援单口','单口数粒外包','裸籽包装机','包装流水线'],
        valueData1:['41942','18009','45480','45795','45390','41942','18009','45480','45795','45390'],
        valueData2:['4242','18009','454480','45795','45590','41942','18079','45880','45795','65390'],
        name1:'2024年1月',
        name2:'2024年2月'
    })
    // 生产一部工序日产量（罐）
    let yieldData=reactive(['01泡籽上料','01泡籽下料','02灭菌','03发制上料','03发制下料','03烤料','J07灭菌罐','J08灭菌罐','J08灭菌罐','J10灭菌罐'])
    let yieldList=reactive([1430,120,110,1430,110,1430,1110])
    // 设备实时运行状态
    let echartsPieData2=ref([
        {name:'GQ100精条',value:100},
        {name:'GQ100鼓大条',value:200},
        {name:'GQ30精条',value:200},
        {name:'GQ50精条',value:200},
    ])
    const cssLink = ref(false);
    onMounted(() => {
      cssLink.value = window.innerWidth<1300?true:false;
    })
</script>
<style scoped lang="scss">
.web{
    .top-title {
      font-size: 32px;
      color: #399bff;
      font-weight: bold;
      left: 50%; /* 根据需要调整位置 */
      transform: translateX(-50%);
    }

    .query-btn{
            color: #fff;
            width: 60px;
            text-align:center;
            background-color: #409eff;
            height: 32px;
            line-height:32px;
            border-radius: 6px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    .search-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 0 30px;
        background-color: rgba(14, 42, 67, 0.6);
        margin-bottom: 1vh;
        .search-box{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .search-list{
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }
        .echart-total-box{
            display: flex;
            .echart-total{
                padding-right: 30px;
                .echart-num{
                    display: flex;
                    align-items:baseline;
                    div{
                        font-size: 30px;
                        color: #db203e;
                    }
                    text{
                        font-size: 14px;
                        color: #fff;
                    }
                    
                }
            }

        }
    }
    .echart-box-total{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .state-box{
        display: flex;
        align-items: center;
        justify-content: center;
        .state-list{
            margin-left: 30px;
            text-align: center;
            .state-name{    
                font-size: 16px;
                margin-bottom: 5px;
            }
            .state-state{
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background-color: red;
            }
        }

    }
    // .echart-total{
    //     .echart-num{
    //         display: flex;
    //         align-items:baseline;
    //         div{
    //             font-size: 30px;
    //             color: #db203e;
    //         }
    //         text{
    //             font-size: 14px;
    //             color: #fff;
    //         }
            
    //     }
    // }

}

.h5{
    .top-title {
      font-size: .32rem;
      color: #399bff;
      font-weight: bold;
      left: 50%; /* 根据需要调整位置 */
      transform: translateX(-50%);
    }

    .query-btn{
        color: #fff;
        width: .6rem;
        text-align:center;
        background-color: #409eff;
        height: .64rem;
        line-height: .64rem;
        border-radius: .06rem;
        margin-bottom: .1rem;
        cursor: pointer;
    }
    .search-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 0 .3rem;
        background-color: rgba(14, 42, 67, 0.6);
        margin-bottom: 1vh;
        .search-box{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .search-list{
                margin-right: .1rem;
                margin-bottom: .1rem;
            }
        }
        .echart-total-box{
            display: flex;
            .echart-total{
                padding-right: .3rem;
                .echart-num{
                    display: flex;
                    align-items:baseline;
                    div{
                        font-size: .3rem;
                        color: #db203e;
                    }
                    text{
                        font-size: .14rem;
                        color: #fff;
                    }
                    
                }
            }

        }
    }
    .echart-box-total{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .2rem;
    }
    .state-box{
        display: flex;
        align-items: center;
        justify-content: center;
        .state-list{
            margin-left: .3rem;
            text-align: center;
            .state-name{    
                font-size: .16rem;
                margin-bottom: .05rem;
            }
            .state-state{
                display: inline-block;
                width: .14rem;
                height: .14rem;
                border-radius: 50%;
                background-color: red;
            }
        }

    }
    .echart-total{
        .echart-num{
            display: flex;
            align-items:baseline;
            div{
                font-size: .3rem;
                color: #db203e;
            }
            text{
                font-size: .14rem;
                color: #fff;
            }
            
        }
    }

}

::v-deep .el-input__inner{
    color: #fff;
}
.echart-contnt{
    display: flex;
    justify-content: space-between;
    padding: 0 1%;
    .echart-list{
        width: 33.3%;
        &:nth-child(1){
            width: 40%;
        }
        &:nth-child(2){
            width: 60%;
            margin:0 1%;
        }
    }
}
.echart-box{
    background-color: rgba(14, 42, 67, 0.6);
    margin-bottom: 1vh;
    padding: 1vh;
}

.el-select {
  width: 80px;
}
::v-deep .el-input__wrapper {
  background-color: #0e2a43 !important;
}
// .el-input {
// background-color: #0e2a43 !important;
// }
.select-box { 
  width: 100%;
  // height: 10%;
  display: flex;
}
.hello-page {
  color: #fff;
  margin: 0;
  padding: 0;
  background: url("../../../assets/wzz_image/bg.jpg") no-repeat;
  background-size: cover; /* 让背景图片等比例拉伸或缩小以填满容器 */
  box-sizing: border-box;
  width: 100%; /* 设置宽度为父容器的100% */
  height: 100%; /* 设置高度为父容器的100% */
  .top-box {
    width: 100%;
    height: 10vh;
    background: url("../../../assets/wzz_image/head_bg.png") no-repeat;
    background-size: cover; /* 让背景图片等比例拉伸或缩小以填满容器 */
    box-sizing: border-box;
    display: flex;
    position: relative;
    .top-log {
      height: 6vh;
    }
    .top-title,
    .top-time {
      position: absolute;
      bottom: 36%; /* 64% 的高度中减去64%得到 36%，再向上移动64%的64%，即36% * 0.64 = 3.6% */
    }

    .top-title {
      font-size: 32px;
      color: #399bff;
      font-weight: bold;
      left: 50%; /* 根据需要调整位置 */
      transform: translateX(-50%);
    }

    .top-time {
      // font-weight: bold;
      font-size: 20px;
      right: 0; /* 根据需要调整位置 */
      font-family: "MyCustomFont", sans-serif; /* 使用自定义字体 */
    }
  }
}
</style>